<template>
  <div class="dialog-content">
    <div class="title">{{$t('subaccount.set_observer')}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <div class="row">
        <el-form-item prop="access_name">
          <el-input v-model="ruleForm.access_name" class="create_input" :placeholder="$t('subaccount.observer_name')"></el-input>
        </el-form-item>
        <el-button @click="creadeassess" type="primary" size="mini">{{$t('btn.create')}}</el-button>
      </div>
    </el-form>
    <small class="info">{{$t('subaccount.ovserver_info')}}</small>
    <ul class="ul" v-loading="getLoading">
      <li class="li" v-for="(v,k) in list" :key="k">
        <span class="name">{{v.access_name}}</span>
        <span class="link">{{v.access_link}}</span>
        <a class="copy" href="javascript:;" @click="handleCopy(v.access_link,$event)">{{$t('subaccount.copy')}}</a>
        <a href="javascript:;" @click="del(v.access_link,k)">{{$t('btn.delete')}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
import { subaccountaccessByCuid, subaccountaccessDel, setAccessObserve } from '@/api';
import clip from '@/utils/clipboard';
import clipboard from '@/directive/clipboard/clipboard';

export default {
  props: {
    data: {
      type: Object,
    },
  },
  directives: {
    clipboard,
  },
  data() {
    return {
      getLoading: true,
      list: [],
      ruleForm: {
        access_name: '',
      },
      rules: {
        access_name: [
          {
            required: true,
            message: this.$t('subaccount.ovserver_name'),
            trigger: 'change',
          },
        ],
      },
    };
  },
  created() {
    this.getSubaccountaccessByCuid();
  },
  methods: {
    creadeassess() {
      this.$refs.ruleForm.validate((boolean) => {
        if (boolean) {
          setAccessObserve({
            cuid: this.data.puid,
            coin_type: this.data.coin_type,
            config_id: this.data.config_id,
            access_name: this.ruleForm.access_name,
          }).then((res) => {
            if (res.data.status === 1) {
              this.list = [{
                access_name: this.ruleForm.access_name.trim(),
                access_link: `${window.location.origin}/pools/dashboard?access_key=${res.data.data.access_key}`,
              }].concat(JSON.parse(JSON.stringify(this.list)));
              this.$message({
                message: this.$t('api.6031'),
                type: 'success',
              });
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
            }
          }).catch();
        }
      });
    },
    getSubaccountaccessByCuid() {
      this.getLoading = true;
      subaccountaccessByCuid({
        cuid: this.data.puid,
        coin_type: this.data.coin_type,
        config_id: this.data.config_id,
      }).then((res) => {
        if (res.data.status === 1) {
          this.list = res.data.data.map(v => ({
            access_name: v.access_name,
            access_link: `${
              window.location.origin
            }/pools/dashboard?access_key=${v.access_key}`,
            access_key: v.access_key,
          }));
        }
        this.getLoading = false;
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.getLoading = false;
      });
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    del(aKey, ind) {
      subaccountaccessDel({
        cuid: this.data.puid,
        coin_type: this.data.coin_type,
        config_id: this.data.id,
        access_key: aKey.split('access_key=')[1],
      }).then((res) => {
        if (res.data.status === 1) {
          this.list.splice(ind, 1);
          this.$notify({
            message: this.$t('api.6088'),
            type: 'success',
            duration: 2000,
            showClose: false,
          });
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-content {
  width: 560px;
  padding: 0 50px 50px;
  .title {
    text-align: center;
    padding: 32px 0 27px;
  }
  .row {
    display: flex;
    .el-form-item {
      flex: 1;
      margin-right: 22px;
      /deep/ .el-input__inner {
        height: 30px;
        padding: 5px;
      }
    }
    .el-button {
      font-size: 14px;
      height: 30px;
      width: 70px;
      margin-top: 5px;
    }
  }
  .info {
    margin-bottom: 20px;
    display: block;
  }
  .ul {
    height: 230px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 2px;
      height: 2px;
    }
    &::-webkit-scrollbar-track {
      background: #ddd;
      border: thin solid lightgray;
      box-shadow: 0px 0px 2px #f6f6f6 inset;
    }
    &::-webkit-scrollbar-thumb {
      background: #373737;
      border: thin solid #000;
    }
    .li {
      display: flex;
      padding-right: 5px;
      margin-bottom: 20px;
      &:last-of-type {
        margin-bottom: 0;
      }
      span:first-of-type {
        width: 66px;
        padding-right: 5px;
        color: #333;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span:nth-of-type(2) {
        width: 300px;
        height: 30px;
        line-height: 28px;
        background-color: #ffffff;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
        border: solid 1px #e0e0e0;
        color: #ccc;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 5px;
      }
      a {
        width: 45px;
        text-align: center;
        cursor: pointer;
        color: #70c1b3;
        line-height: 30px;
        outline: none;
      }
    }
  }
}
</style>

